Widget terbaru di flutter 1.9 

Adalah 

Selectable text toggleButton ColorFiltered 
Pada kali ini cara gunakan widget ini 
Pertama buat stl 
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< 


build context 
turn ( 
home: 
appBar: title: 
body: 
child: 
mainAxisAlignment : .center, 
children: « » 


data 


playSoundEffect  effectType: 


device. 


01:13 


>| mj») calm) sisik ME || 
Didalm column selectable text 

Sebernar nya sama text biasa hanya saja bisa diisi length 

Contoh 

Disni juga bisa isi style 
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araos 


01:53 
|] ee mp DI 


- 
~ 


Peralatan Tampilan 


© mandat 


Class 
over 
Widge 

ret 
h 


Launching lib 
Built build\a 


Ini adalah selectebleText 
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No Configurations 


02:05 
UE) Ke att 


- 
~ 
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© mandat 
class _ 
dover 
Widge 
ret 


h 


I/hwaps (32 


/zygote64(3 


Bantuan 


Bantuan 


MyAppstate extenas statecmyapp2 
ride 
t build(BuildContext context) 
urn MaterialApp( 
jome: Scaffold 
appBar: AppBar( 
title: Text( 
), App 
body: Center( 
child: Column( 


mainAxisAlignment: MainAxisAlignment.center, 


children: <Widget> 
SelectableText( 


yle(fontSize: 


main.dart on RNE L22 in debug mode... 


pp\outputs \apk\debug\app-debug. apk. 


MyAppstate extenas statecmyapp2 
ride 
t build(BuildContext context) ( 
urn MaterialApp( 
jome: Scaffold 
appBar: AppBar( 
title: Text( 


child: Column( 


Ini adalah selectable text. Silahkan pilih 
saya 


mainAxisAlignment: MainAxisAlignment.center, 


children: «Widget» 
SelectableText( 


€ 
style: TextStyle(fontSize: 
) electa 


JNI_OnLoad 

Do partial code cache collection, 
Aft de cache collection, code 
Increasing code cache capacity to 
Do partial code cache collection, 
After code cache collection, code: 


Increasing code cache capacity to 


9° U8 


Bisa dicopy dan paste ditempat laiin 


Bisa ada tambhan 


cod 
29KB, 
128KB 
code- 
61KB, 
6KB 


copy SELECT ALL 


Ini adalah selectable text. Silahkan pilih 
saya 


9KB, data-2 


data=29KB 


1KB, data=48KB 
data-48KB 


11:50 


Ada cursor 


A 53.FLUTTER 50. Flutter 1.9 (SelectableText, ToggleButtons, ColorFiltered).mp4 - VLC media player - x 


Media Playback Audio Video Terjemahan Peralatan Tampilan Bantuan 


© mandat 


varias rs Class _MyApp>tate extenas >tate<myapp> 
@override 
Widget build(BuildContext context) { 
return MaterialApp( 
home: Scaffold 
appBar: AppBar( 
title: Text( 
), AppE 
body: Center( 
child: Column( 
mainAxisAlignment: MainAxisAlignment.center, 
children: «Widget» 


SelectableText( 


style: TextStyle(fontSize: 20), 
showCursor: true, 


Nk bler 


Ini adalah s. .pctable text. Silahkan pilih 
saya 


I/zygote64(32 : Increasing code cache capacity to 128KB 
I/zygote64(32717): Do partial code cache collection, code=61KB, data=48K 
I/zygote64(32717): Afte ache collection, code=61KB, data=48KB 
I/zygote64( 32717): r apacity to 

V/AudioManager (32 : oundEf fect effectType: 

V/AudioManager (327 : playSoundEffect effectType: 

Reloaded 1 of 468 libraries in 801ms. 


"MOBS? 9595 IE 


02:34 11:50 


m Rap ki Fs 0 | 
Cursor bisa ganti warna nya 
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Class MyAppotate extenas btatesMyApp? 
@override 
Widget build(BuildContext context) { 
return MaterialApp( 
home: Scaffold 
appBar: AppBar( 
title: Text( 
), ar 
body: Center( 
child: Column( 
mainAxisAlignment: MainAxisAlignment.center, 
children: «Widget» 
SelectableText( 


Ini adalah selectable text. Silahkan pilih 
saya. 


style: TextStyle(fontSize: 20), 
showCursor: true, 

cursorWidth: 

cursorColo 


I/zygote64(32717): Do partial code cache collection, code=61KB, data-48KB 
1/zygote64(32717): After code cache collection, code=61KB, data-48KB 
I/zygote64(32717): Inc 5 code cache cap. 

V/AudioManager (32717 ndEffect effe 

V/AudioManager (32717 playSoundEffect effe 

Reloaded 1 of 468 libraries in 8@1ms. 


Reloaded 1 of 468 libraries in 654ms. 


NAMBER | 


02:55 11:50 
||] Gelai Ciu 


Ini untuk selectable widget 

Berikutnya toggleButton 

Dibawahnya 

Kasih sizedBox 

Si togglebutton ini punya children kumpulan widget 


Nanti mau berapa tombol tergantung berapa misalkan 3 widget berarti nanti 
muncul 3 tombol 

Jadi setiap tombol ada icon 

Lalu yg kedua perlu diisi isselected 

List dari boolean untuk milih isi lenght 
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( 
"Ini adalah selectable text. Silahkan pilih saya.", 
style: (fontSize: 20), 
showCursor: 5 
cursorWidth: 3, 
cursorColor .red, 
d, ; tableTex 
(height: 10,), 
( 
isSelected: , 
children: € >[ 
( .access alarm), 
( .adb), 
( .add comment) 
| 


` 


ection, code=124KB, 
: After code cache collection, code=121KB, 
ygote64(3 partial 3 cache collectio 2-12 data-76KB 
ygote64(3 e cache collection, code=123KB, 6KB 


/zygote64(32717): Incr code cache capacity to 512KB 


UI Hn ka SER o a 
Ini ada 3 buton maka berikan list nya 3 boolean 

Maka buat dulu diatas 

List<bool> namanya = misalkan depan true kdua false ketiga false 
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createState() => 


> isSelected = [ 


build( context) { 
return 
home: ( 
appBar: ( 
title: ("Widgets Demo GDG 2019 China"), 
), p 


body: ( 

child: ( 
mainAxisAlignment: „center, 
children: < >[ 


Reloaded 1 of 468 lib 
Reloaded 1 of 468 libraries in 65 
cache co 
e cache collection, c 


“tial code che collect 


04:35 


WE) ta Esl] SAE o ai 


Dibawah tingal kita pasang isi isSelected 

Jgn lupa onprased ketika di klik mau diapain 

Dia perlu method (index) {} yg perlu paramter index 

Jadi didalm nya tingal kita ubah saja isSelected kita ubah menjadi lawanya 
Jgn lupa disetState 
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says 
showCursor: 
cursorWidth: 
cursorColor 
), // Selectal 
( 
height 
), // si 


isSelected: isSelected, 

children: < >[ 
.access alarm), 
.adb), 
.add comment) 

» // «wi [] 

onPressed: ndex) 

setState(() { 

isSelected[index] = !isSelected[index]; 


Ni 


Łe 


Reloaded 1 of 468 libraries in 80 
Reloaded 1 of 468 librar in 654ms. 
te64(32717): Do full code he collection, 
ygote64(3 : After code cache collection, code-121KB, d 
20te64(3 Do partial code cache collection, 2-12 data-76KB 
64(3 Afte e cache collection, code 6KB 


serong 


: Increasing code cache capacity to 512KB 


|] Ke Cilik SSM Pk 
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eye. 
showCursor: 
cursorWidth: 
cursorColor: 
), > 
( 
height 
), Si 


isSelected: isSelected, 
children: < of 
.access alarm), 
.adb), 


.add comment) Ini adalah selectable text. Silahkan pilih 
saya 


, Wi 


onPressed: (index) { [O] 8 a 
setState(() { | 
isSelected[index] = !isSelected[index]; 
D; 


, 


V/AudioMan ): playSoundEffect effectType: 
V/AudioMan ~ ): playSour effectType: 
V/AudioMan 327 : playSo effectTyp 
f effectType: @ 
ndEffect 
ffect 
effectType: 


1) em pw ASP — 
Kita lihat jika di klik maka berubah 

Kalau hanya ingin satu saja dipilih maka kita perlukan for saja 

Index n ya ganti i 


Kalau misalkan i itu index maka diisi true kalau bukan false 
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nyo. 


showCursor: v 
cursorWidth: 3, 
cursorColor: 


Widgets Demo GDG 2019 China 


), € 
( 
height: 10, 
), zedBox 
( 
isSelected: isSelected, 
children: < of 
.access alarm), 


.adb), 
.add comment) Ini adalah selectable text. Silahkan pilih 


/ Wid t | paya 
], 


onPressed: (index) © = a 
setState(() { 
for( i = 0; i < isSelected.length; i++) 
44 isSelected[i] = (i = index) ? : 


V/AudioManager (32717): playSoundEffect  effectType: 
V/AudioManager (32717 playSoundEffect effectType: 
Reloaded 1 of 468 librar in 683 
V/AudioManager(32717): playSoundEffect  effectTy 
V/AudioManager (32717 play ndEffect effectType: 
V/AudioManager(32717): playSoundEffect effectType: 
V/AudioManager(32717): playSoundEffect effectType: 


06:33 


TE) Ke DI six 
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Cus DULU KUL. 


), Selecti 
( 
height: 10, 
», si zedBox 
( 
isSelected: isSelected, 
children of 
( .access alarm), 
.adb), 
.add comment) 


1; Wi | 
onPressed: (index) 
setState(() { 
for( i = 0; i < isSelected.length; i+) 
isSelected[i] = (i — index) ? : 


Ng 
) 


aima l, 


V/AudioManager(32717): playSoundEffect effectType: 
V/AudioManage 717): playSoundEffect effectType: 
Reloaded 1 of 468 ries in € 

playSoundEffect effectType: 
V/AudioManager(32717): playSoundEffect effectType: 
V/AudioManager(32717): playSoundEffect effectType: 


V/AudioManager(32717): playSoundEffect effectType: 


06:36 


|] ka ma Ct 
Maka disini ada banyak bisa diganti misalkan warna nya 

Filcolor itu untuk si length nya 

SelectedColor 


Ada border 
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© mandat 
mene ToggleButtons( 
isSelected: isSelected, 
children: <Widgeto[ 
Icon(Icons.access_alarm), 
Icon(Icons.adb), 
Icon(Icons.add_comment 
1, // <Widget>[ 
onPressed: (index) { 
setState(() { 
for (int i 0; i < isSelected.length; i++ 
isSelected[i] = (i = index) ? true : fal 


Di 
}, Ini adalah selkctable text. Silahkan pilih 
fillColor: Colors.red[50], saya 
selectedColor: Colo red, 6 8 a 
selectedBorderColor: Colors.red, 


), 


V/AudioManager(32717): playSoundEffect effectType: 
Reloaded 1 of 468 libraries in 683ms. 
V/AudioMa r(32717 ndEffect 
V/AudioManager(32717 a ndEffect 
V/AudioManager(32717): /SoundEffect effectType: 
V/AudioManager(32717): playSoundEf effectType: 
Reloaded 1 of 468 libraries in 689ms. 


"MG BS? 9 6 IE 


07:20 


Hh) mp (ii Bs Mp | 
Maka sepert ini 

Dan bisa ganti warna 2 lain 

Ada splachColor jika klik warna apa misalkan warna biru 

Misalkan diklik tahan ini hightlight 


A 53.FLUTTER 50. Flutter 1.9 (SelectableText, ToggleButtons, ColorFiltered).mp4 - VLC media player 


Media Playback Audio Video Terjemahan Peralatan Tampilan Bantuan 


No Configuration: 
ToggleButtons( 
isSelected: isSelected, 
children: <Widget>[ 
Icon(Icons.access alarm), 
Icon(Icons.adb), 
Icon(Icons.add comment 
], wi 
onPressed: (index) { 
setState(() { 
for (int i 0, i < isSelected.length; i++ 
isSelected[i] = (i = index) ? true : fa 
Ni 
}, Ini adalah selectable text. Silahkan pilih 
fillColor: Colo red[50], saya 
selectedColor: Colors.red, 6 om re a 
selectedBorderColor: Colors.red, 
splashColor: Colors.blue, 
highlightColor: Colors.yellow, 
| tto 
V/AudioManager(32717): playSoundEffect  effectType: 
V/AudioManager(32717): playSoundEffect effectType: 
V/AudioManager (32717 aySoundEffect effectType: 
V/AudioManager (32717): ndEffect effectType: 
Reloaded 1 of 468 libraries in 689ms. 
V/AudioManager(32717): playSoundEffect  effectType: 


Reloaded 1 of 468 libraries in 663ms 
UN AMAN | 


Six « || 
Kalau splash di klik maka muncul 


07:55 
|] Ke DI 


x 
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No Configurstioes 


ToggleButtons( 
isSelected: isSelected, 
children: <Widgeto[ 
Icon(Icons.access_alarm), 
Icon(Icons.adb), 
Icon(Icons.add_comment 
1 Wi 
onPressed: (index) { 
setState(() { 
for (int i = 0; i < isSelected.length; i++ 
isSelected[i] = (i — index) ? true : fa 


Di 
If Ini adalah selectable text. Silahkan pilih 
fillColor: Colo red[50], saya 
selectedColor: Colors.red, 
selectedBorderColor: Colors.red, 
splashColor: Colors.blue, 
highlightColor: Colors.yellow, 


Reloaded 1 of 

V/AudioManager (32717 ySoundEffect effectType: 
V/AudioManager(32717): pla ndEffect effectType: 
V/AudioManager (32717 

V/AudioManager (32717 

V/AudioManager (32717) aySoundEf effectTyp 
V/AudioManager( 32717 effectType: 


mê & e JE 


08:05 
pb kamp Cs tu 


Dan juga bisa berikan lagi radius 
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aa ALUNKALUND sales alarm), 
Icon(Icons.adb), 
Icon(Icons.add_comment 
1, Widg 
onPressed: (index) { 
setState(() { 
for (int i = 0; i < isSelected.length; i+ 
isSelected[i] = (i == index) ? true : fa 
Di 
h 
fillColor: Colors.red[50], 
selectedColor: Colors.red, 


selectedBorderColor: Colors.red, 
splashColor: Colors.blue, Ini adalah selkctable text. Silahkan pilih 


highlightColor: lors.yellow, fac 


borderRadius: BorderRadius.circular(15), 6 8 a 


), 


auma ), 


V/AudioManager(32717): playSoundEffect  effectType: 
V/AudioManage playSoundEffect  effectTyp 
V/AudioManager ( 

V/AudioManager( 

V/AudioManager(32717): playSoundEffect 

Reloaded 1 of 468 libraries in 695ms. 


V/AudioManager(32717): playSoundEffect effectType: 


û ze 9 es | | 


08:28 11:50 
|] Ke att 


Ini untuk toggle button 
Sekarang coba colors filter itu dia akan memberikan filter pada pembungkusnya 
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ALUN AKUN ALLEDD, atam), 
Icon(Icons.adb), 
Icon(Icons.add comment 
1; wi 
onPressed: (index) { 
setState(() { 
for (int i = 0; i < isSelected.length; i++ 
isSelected[i] = (i == index) ? true : fa 


Ng 
h 
fillColor: Colors.red[50], 
selectedColor: Col .red, 
selectedBorderColor: Colors.red, 
splashColor: Colo blue, Ini adalah selectable text. Silahkan pilih 
highlightColor: Colors.yellow, Baya 
borderRadius: BorderRadius.circular(15), © 8 a 


V/AudioManag 7 : playSoundEffect effectType: 
V/AudioManager playSoundEffect effect 


V/AudioMan. E undEffect 


08:41 11:50 


ka 
Seluruh layar misalkan untuk scafold nya 
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class _MyAppState extends State<MyApp> 
List<bool> isSelected = [true, false, false]; 


override 
Widget build(BuildContext context) { 
return MaterialApp( 
home: widget( 
thild: Scaffold( 
appBar: AppBar( 
title: Text("W 
), 
body: Center( 
child: Column 
mainAxisAlignment: MainAxisAlignment.center, 
children: <Widgeto[ 
SelectableText( 
1 lala |! 1 . itan 
style: TextStyle(fontSize: 20), 
showCursor: true, 


V/AudioManager( 


V/AudioManager (327 undEffect 
V/AudioManager (327 aySoundEffect 
V/AudioManager 

ar in 695ms. 
V/AudioManager(3 ): playSoundEffect 
V/AudioManager (327 playSoundEffect 


IN ia Lali (RSA mp? 
Kita bunkus dgn ColorsFiltered( 

Lalu isi nya bisa kita pilih sebernanya filter mau apa 

Disni kita buat satu variabel 

Pertama kali kasih colorFilter itu colors.blue, blendmood Scrren 

Lalu pasang colorFilternya 
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> isSelected = [ 


colorFilter .screen); 


build( context) { 
return ( 
home: ( 
colorFilter: colorFilter, 
child: ( 
appBar: ( 
i ("Widgets Demo GDG 2019 China"), 


mainAxisAlignment: .center, 
children: « >[ 


“Ini adalah selectable text. Silahkan pilih saya.", 


717): playSou > effectType: @ 
V/AudioManager(32717): playSoundEffect effectType: @ 
V/AudioMan 

V/AudioM: 

Reloade librar 

V/AudioManager (32717): playSound 

V/AudioManager (32717): playSoundEffect 


>] ines calle] sisiz o || 
Lalu kita kebawha setiap di klik maka sitoggle berubah juga berubah juga 

Disetsatte kita if kalau index nya === 

Maka colors filter itu sama degn colorsFilter.mode() ini yg pertama 

Else if 

Kalu index nya 1 

Maka kita ubah 

Else lagi sisa nya 
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dee alarm), 
.adb), 
.add comment) 
1, Widget>[] 
onPressed: (index) { 
setState(() { 
if (index = 0) 
colorFilter = 
.mode( .blue, .screen): 
else if (index == 1) 
colorFilter = 
.mode( .green, -softLight); 
else 
colorFilter = 
-mode( .purple, .multiply): 


for ( i = 0; i < isSelected.length; i++) 
isSelected[i] = (i — index) ? : : 


h 
fillColor: -red[50], 


V/AudioMan (32717): playSou ect effectType: 
oundEffect effectTyp 
effectType: 
effectType: 
librar 
717): playSoundEffec effectType: 
effectTyp 


hoot calm] sisik po [| 
Sekarng lihat ada mode 1 
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Hi Acun acun -ALLESS, aLak), 
Icon(Icons.adb), 
Icon(Icons.add comment) 
, Widg [] 
onPressed: (index 
setState(() { 
if (index = 0 
colorFilter = 
ColorFilter.mode(Colors.blue, Blen 
else if (index = 1 
colorFilter = 
ColorFilter.mode(Colors.green, Ble 
else 
colorFilter = 
ColorFilter.mode(Colors.purple, Bl 
for (int i = 0; i < isSelected.length; i 
isSelected[i] = (i = index) ? true : 
Di 
, 
fillColor: Colors.red[50 


V/AudioManager(32717): playSoundEffect effectType: 
V/AudioManager ( ndEffect effectType 
V/AudioManager (32717 SoundEffect effectType: 
Reloaded 1 of 468 libraries in 695ms. 
V/AudioManager(32717): playSoundEffect 
V/AudioManager(32717): playSoundEffect effectType: 
Reloaded 1 of 468 libraries in 973ms. 


seseronas 


5 9 JE 


11:08 
|] ma DI 


Ini pertama 
Kalau kedua 


A 53.FLUTTER 50. Flutter 1.9 (SelectableText, ToggleButtons, ColorFiltered).mp4 - VLC media player - x 
Media Playback Audio Video 


Terjemahan Peralatan Tampilan Bantuan 


© mandat 


ALUN LCUNI AC LEYI dlarm)/, 
Icon(Icons.adb), 
Icon( Icons.add comment) 
} i = 
onPressed: (index 
setState(() { 
if (index = 0 
colorFilter = 
ColorFilter.mode(Colors.blue, Blen 
else if (index = 1 
colorFilter = 
ColorFilter.mode(Colors.green, Bler 
else 
colorFilter 
ColorFilter.mode(Colors.purple, Ble 


Ini adalah selectable text. Silahkan pilih 
saya 


for (int i = 0; i < isSelected.length; i 6 H a 
isSelected[i] = (i index) ? true : 


, 
cat saa fillColor: Colors.red[50 


V/AudioManager(32717): playSoundEffect effectType: 
V/AudioManager(32717): playSoundEffect effectType: 
Reloaded 1 of 468 librarie 

V/AudioManager (32717): play effectType: 
V/AudioManager (32717): playSoundEffect effectType: 
Reloaded 1 of 468 libraries in 973ms 

V/AudioManager (32717): playSoundEffect  effectType: 


Ban? 9 e6 3 


11:11 11:50 
|] Ke att 


Ini kalau ketiga 
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vanar +ACLeESS_atariy, 
.adb), 
.add comment 


, ] 
onPressed: (index 


setState(() 
if (index = 0 
colorFilter 
.blue, 
else if (index 
colorFilter 
.green, 


else 
colorFilter 
.mode .purple, 
Jr i = 0; < isSelected. length; i 
isSelected[i i = index) ? 3 


fillColor: -red[50 


V/AudioManager(32717): playSoundEffect effectType 
Reloaded 1 of 468 librar 

V/AudioManager(32717): playSoundEffect effectType 
V/AudioManager(32717): playSoundEffe effectType: 
Reloaded 1 of 468 libraries in 973ms 
V/AudioManager(32717): play ndEffect 
V/AudioManager (32717): pla 


11:16 
|] Ke Lil (5 


Disni ada banyak blandMode nya 
Bisa dicoba masing 


